<template>
     <div id="box">
          <header>
               <ul>
                 <li @click="fanhui"><img src="../assets/img/fanhui.png"></li>
                 <li>公告</li>
                 <li></li>
               </ul>
          </header>
          <section>
                 <div class="menu_top"> 
                       <ul>
                         <li v-for="list in lists" v-html="list.text"></li>
                        </ul>
                  </div>
                  <div class="menu_foot">
                  <div class="menu_one">
                     <div class="two">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd>
                               <p v-for="meu in meus" v-html="meu.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                  </div>

                       <div class="menu_two">
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                          <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                         <div class="one">
                            <dl>
                             <dt><img src="../assets/img/yiwei.png"></dt>
                             <dd >
                               <p v-for="dd in dds" v-html="dd.text"></p>
                             </dd>
                           </dl>
                           <p><img src="../assets/img/gengduo.png"></p>
                         </div>
                       </div>
                  </div>
          </section>
      </div>
</template>

<script>
  import".././assets/js/jquery-1.12.4.min.js"
export default {
  name: 'box',
  data () {
    return{
       lists:[
           {text:"消息"},
           {text:"公告"}
         ],
         dds:[
           {text:"系统升级"},
           {text:"10-10 13:24"},
         ],
         meus:[
           {text:"您的举报管理员回复：121212..."},
           {text:"04-11 17:18"}
         ]
        
        
    }
  },
  methods:{
          fanhui(){
            this.$router.go(-1)
          }
         }
}
$(function(){
  
  $(".menu_top ul li").click(function(){
    var index=$(this).index();
    $(this).addClass("active").siblings().removeClass('active');
     $(".menu_foot div").eq(index).show().siblings().hide()
  })
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @import ".././assets/less/gonggao.less";
   @import ".././assets/css/reset.css";
</style>